import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';

console.log(React.Component)


let outCount = 0;
function App(props) {
  console.log('props')
  // let count = 100;
  // setXXX(回调函数 这个回调函数的参数就是最新的状态)
  // useState的初始化只会执行一次
  let [state, setState] = useState(() => {
    console.log('useState')
    return {
      count: 100,
      name: "珠峰"
    }
  })
  outCount = state.count
  let ref = useRef();// 函数式组件中的一个获取DOM的操作
  function add() {
    setState({
      ...state,
      count: state.count + 10
    })
    // ref.current = state.count + 10
    outCount = state.count + 10
    // console.log(state.count)
  }
  function log() {
    setTimeout(() => {
      console.log(outCount)
      console.log(ref.current)
      // console.log(state.count)
      // setState((l) => {
      //   console.log(l.count)
      //   return {
      //     ...l
      //   }
      // })
    }, 3000);
  }
  return <>
    <h1>{state.count}---{state.name}</h1>
    <button ref={ref} onClick={add}>+</button>
    <button onClick={log}>log</button>
  </>
}




// function App(props) {
//   console.log(props)
//   // let count = 100;
//   let [count, setCount] = useState({100})
//   function add() {
//     setCount(count + 10);
//     console.log(count)
//   }
//   return <>
//     <h1>{count}</h1>
//     <button onClick={add}>+</button>
//   </>
// }

ReactDOM.render(<App qq='123' ww='234' />, document.getElementById('root'))